//柱状图模块1
(function () {
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    var option = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            top: "10px",
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['旅游', '教育', '游戏', '医疗', '电商', '社交', '金融'],
                axisTick: {
                    alignWithLabel: true
                },
                //修改刻度标签 相关样式
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: '12'
                },
                //轴样式不显示
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                //修改刻度标签 相关样式
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: '12'
                },
                //轴样式
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                        width: 2
                    }
                },
                //轴分割线样式
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                    }
                }
            },
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                //修改柱子宽度
                barWidth: '35%',
                data: [200, 300, 300, 900, 1500, 1200, 600],
                //修改柱子样式
                itemStyle: {
                    //圆角
                    barBorderRadius: 5
                }
            }
        ]
    };
    myChart.setOption(option);
    //自适应屏幕
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();
//横向柱状图
(function () {
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));
    option = {
        grid: {
            top: '10%',
            left: '22%',
            bottom: '10%',
            //不需要考虑刻度标签的距离时
            // containLabel: true
        },
        xAxis: {
            //不显示X轴
            show: false
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
                //不显示轴线
                axisLine: {
                    show: false
                },
                //不显示刻度
                axisTick: {
                    show: false
                },
                //刻度标签
                axisLabel: {
                    color: '#fff'
                }
            },
            {
                data: [702, 350, 610, 793, 664, 1024],
                inverse: true,
                //不显示轴线
                axisLine: {
                    show: false
                },
                //不显示刻度
                axisTick: {
                    show: false
                },
                //刻度标签
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                }
            },
        ],
        series: [
            {
                name: '条',
                type: 'bar',
                data: [70, 34, 60, 78, 69, 90],
                yAxisIndex: 0,
                itemStyle: {
                    //圆角
                    barBorderRadius: 20,
                    //柱子颜色
                    color: function (params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num];
                    }
                },
                //柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
                //显示柱子内部的文字
                label: {
                    show: true,
                    position: "inside",
                    //自动解析data中的数据
                    formatter: "{c}%",
                }
            },
            {
                name: '框',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 100],
                yAxisIndex: 1,
                itemStyle: {
                    //圆角
                    barBorderRadius: 15,
                    //柱子颜色
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                },
                //柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
            }
        ]
    };
    myChart.setOption(option);
    //自适应屏幕
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();
//拆线图1
(function () {
    var myChart = echarts.init(document.querySelector('.line .chart'));
    option = {
        //折线的颜色
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            //series如果有name，这里不用写了
            // data: ['新增粉丝', '新增游客'],
            //图例样式
            textStyle: {
                //颜色
                color: '#4c9bfd'
            },
            //距离右边10%
            right: '10%'
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            //显示边框
            show: true,
            //边框颜色
            borderColor: '#012f4a',
            //包含刻度文字在内
            containLabel: true
        },
        xAxis: {
            type: 'category',
            //去除轴间距
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                //去除刻度线
                show: false
            },
            axisLabel: {
                //文本颜色
                color: '#4c9bfd'
            },
            axisLine: {
                //去除轴线
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisTick: {
                //去除刻度线
                show: false
            },
            axisLabel: {
                //文本颜色
                color: '#4c9bfd'
            },
            axisLine: {
                //去除轴线
                show: false
            },
            //分割线
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        series: [
            {
                name: '新增粉丝',
                type: 'line',
                stack: '总量',
                //平滑曲线
                smooth: true,
                data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
            },
            {
                name: '新增游客',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            },
        ]
    };
    myChart.setOption(option);
    //自适应屏幕
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    //利用jquery将option.series中的data更换掉就可以实现此功能了，也就是说这个图表可以动态改变
    //666
})();
